<template>
  <div class="com-global-tableview-custom-cell">
    <ul class="table-view">
      <li v-for="(v, k) in listData.list" :key="v._id || k" class="cell">
        <slot :item="v" />
      </li>
    </ul>
    <div class="page-box w-flex-center">
      <a-pagination
        v-model="page.current"
        :page-size-options="pageSizeOptions"
        :total="listData.total"
        show-size-changer
        :page-size="page.pageSize"
        @showSizeChange="pageSizeChange"
        @change="pageNumChange"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <span v-if="props.value === '50'">全部</span>
        </template>
      </a-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({
  name: "ComGlobalTableviewCustomCell",
})
export default class ComGlobalTableviewCustomCell extends Vue {
  @Prop({ type: Object, default: () => ({}) }) listData!: any;

  pageSizeOptions = ['10', '20', '30', '40', '50']

  page = {
    current: 1,
    pageSize: 10,
  };

  @Watch("$route.query")
  routerChange() {
    this.dataInit();
  }

  created() {
    this.dataInit();
  }

  /**
   * 分页改变的是偶调用
   */
  pageNumChange(num: number) {
    this.routePush(num)
  }

  /**
   * 分页大小改变的时候调用
   */
  pageSizeChange(num: number, size: number) {
    this.routePush(num, size)
  }

  routePush(num: number, size?: number) {
    const query: any = { ...this.$route.query };
    size ? query.pageSize = size : null
    query.pageNum = num;
    query.tage = new Date().getTime();
    this.$router.push({ path: this.$route.path, query });
  }

  /**
   * 数据初始化
   */
  dataInit() {
    this.page.current = this.$route.query.pageNum
      ? parseInt(this.$route.query.pageNum as any)
      : 1;
    this.page.pageSize = this.$route.query.pageSize
      ? parseInt(this.$route.query.pageSize as any)
      : 10;
  }
}
</script>

<style scoped lang="less">
.com-global-tableview-custom-cell {
  margin-bottom: 20px;
  .table-view {
    margin: 0;
    padding: 0;
    .cell {
      position: relative;
    }
  }
}
</style>
